<template>
	<view>
		<view class="navbar pl30 pr30">
			<view class="white f40 mb20"
				:style="[{paddingTop:menubutton.top+'px'},{lineHeight:menubutton.height+'px'}]">
				{{title}}
			</view>
			<u-swiper :list="banner" height="125"></u-swiper>
		</view>
		<view class="menu d-b-c ml30 mr30 tc mt60 f30 line pb20">
			<view class="item flex-1" @click="jump('/pages/index/recharge')">
				<image src="@/static/image/menu_icon_1.png" mode="aspectFit"></image>
				<view>空中充值</view>
			</view>
			<view class="item flex-1" @click="jump('/pages/index/invite')">
				<image src="@/static/image/menu_icon_2.png" mode="aspectFit"></image>
				<view>我要赚钱</view>
			</view>
			<view class="item flex-1" @click="jump('/pages/index/vehicle')">
				<image src="@/static/image/menu_icon_3.png" mode="aspectFit"></image>
				<view>车队管理</view>
			</view>
			<view class="item flex-1" @click="jump('/pages/index/coupon')">
				<image src="@/static/image/menu_icon_4.png" mode="aspectFit"></image>
				<view>优惠券</view>
			</view>
		</view>
		<view class="notice d-s-c ml30 mr30 ">
			<u-tag text="公告" bgColor="#FFEEE0" size="mini" color="#FF7E11" shape="circle"
				borderColor="transparent"></u-tag>
			<u-notice-bar :text="noticeList" direction='column' bgColor="transparent" color='#404040'></u-notice-bar>
		</view>
		<view class="lists pt20 pl30 pr30 pb20">
			<view class="listMenu d-s-c tc pb30">
				<view class="flex-1 item active">LNG</view>
				<view class="flex-1 item ">92#</view>
				<view class="flex-1 item ">95#</view>
				<view class="flex-1 item">
					<view class="d-c-c" @click="showMore=!showMore">
						<text class="mr5" :class="showMore?'active2':''">更多</text>
						<u-icon name="arrow-down-fill" size="12" :color="showMore?'#FF7E11':''"
							:customStyle='showMore?"transform:rotate(180deg)":""'></u-icon>
					</view>
					<view class="popup bg-white" :class="showMore?'morePopup':''">
						<view class="pl15 pr15 pt30 d-s-s d-c">
							<view v-for="(item,index) in moreList" :key="index" class="ww100">
								<view class="tl pl30 pr30">{{item.name}}</view>
								<view class="list d-s-c f-w pt20 pb20">
									<view class="item flex-1 gray6 f28 d-c-c" v-for="(e,i) in item.key" :key="i">
										{{e.name}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<picker class="flex-1 item" mode="region">
					<view class="d-c-c">
						<text class="mr5">城市</text>
						<u-icon name="arrow-down-fill" size="12"></u-icon>
					</view>
				</picker>
			</view>
			<view class="list">
				<view class="item bg-white p20 mb20 br14" v-for="(item,index) in list" :key="index"
					@click="jump('/pages/mete/detail')">
					<view class=" d-b-c">
						<view class="tilte f30">{{item.title}}</view>
						<view class="tag1 d-c-c f20">
							<image class="mr5" src="@/static/image/distance.png" mode="widthFix"></image>
							{{item.distance}}KM
						</view>
					</view>
					<view class="gray6 mt15 f20">{{item.address}}</view>
					<view class="d-b-c mt20">
						<view class="d-s-c left">
							<u-tag :text="item.tag" bgColor="#FF7E11" color="#fff" borderColor="transparent"></u-tag>
							<view class="fb f30 mr20 ml20">￥{{item.price}}/L</view>
							<view class="d-c-c f24 gray9">
								<image class="mr10" src="@/static/image/shijian.png" mode="widthFix"></image>24h
							</view>
						</view>
						<view class=""><u-button text="一键支付" size="mini" shape="circle" plain
								color="#FF7E11"></u-button></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.title = uni.getAppBaseInfo().appName
			this.menubutton = uni.getMenuButtonBoundingClientRect()
			// console.log(this.menubutton);
		},
		data() {
			return {
				showMore: false,
				moreList: [{
					name: '汽油',
					key: [{
						name: '92#',
						checked: false
					}, {
						name: '95#',
						checked: false
					}, {
						name: '98#',
						checked: false
					}]
				}, {
					name: '菜油',
					key: [{
						name: '92#',
						checked: false
					}, {
						name: '95#',
						checked: false
					}, {
						name: '98#',
						checked: false
					}]
				}, {
					name: '天然气',
					key: [{
						name: 'CNG',
						checked: false
					}, {
						name: 'LNG',
						checked: false
					}]
				}],
				noticeList: ['精准推送附近加气站的优惠活动信息...', '精准推送附近加气站的优惠活动信息...'],
				list: [{
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}],
				title: "",
				menubutton: {},
				banner: [
					"/static/image/banner.png",
					"/static/image/banner.png",
					"/static/image/banner.png",
				],
				tabs: [{
					name: 'LNG',
				}, {
					name: '92#',
				}, {
					name: '95#'
				}]
			}
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		overflow: hidden;
		position: absolute;
		z-index: 3;
		left: 0;
		top: 90rpx;
		width: 100%;
		background-color: #fff;
		max-height: 0;
		transition: 0.3s;


		.item {
			width: calc(33.33% - 30rpx);
			height: 70rpx;
			margin: 15rpx;
			background-color: #F7F8FA;
		}
	}

	.morePopup {
		max-height: 600rpx;
		transition: 0.3s;
	}

	.lists {
		background-color: #f4f4f4;
		position: relative;

		.listMenu {


			.active {
				color: #FF7E11;
				position: relative;

				&::after {
					position: absolute;
					content: "";
					background-color: #FF7E11;
					width: 1.5em;
					height: 2px;
					bottom: -10rpx;
					transform: translateX(-50%);
					left: 50%;
					z-index: 1;
				}
			}

			.active2 {
				color: #FF7E11;
			}
		}

		.list {
			.item {
				.tag1 {
					background-color: #EFEFEF;
					width: 100rpx;
					height: 30rpx;
					border-radius: 10rpx;

					image {
						width: 20rpx;
					}
				}

				.left {
					image {
						width: 40rpx;
					}
				}
			}
		}
	}

	.menu {
		.item {
			image {
				// background-color: transparent;
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
			}
		}
	}

	.navbar {
		height: 350rpx;
		background-color: #FF7E11;
		border-radius: 0 0 30rpx 30rpx;
	}
</style>